<template>
  <div class="planDetial">
    <div class="table-box">
      <div class="detail-container">
        <div class="detail-title">基本信息</div>
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="form" class="lay-drawer-form">
          <a-row>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="母料编码" prop="masterbatchCode" >
                <a-input v-model="form.masterbatchCode"
                         :maxLength="20"
                         placeholder="请输入母料编码"/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="母料名称" prop="masterbatchName" >
                <a-input v-model="form.masterbatchName"
                         :maxLength="50"
                         placeholder="请输入母料名称"/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="规格型号" prop="masterbatchModel" >
                <a-select  v-model="form.masterbatchModel" placeholder="请选择规格型号">
                  <a-select-option  key="" value="" >
                    请选择规格型号
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="计量单位" prop="masterbatchCompany" >
                <a-select  v-model="form.masterbatchCompany" placeholder="请选择规格型号">
                  <a-select-option  key="" value="" >
                    请选择计量单位
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="版本号"  prop="version">
                <a-input v-model="form.version"
                         :maxLength="20"
                         placeholder="请输入版本号"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="版本说明"  prop="versionMemo">
                <a-textarea v-model="form.versionMemo"
                            :maxLength="200"
                            :rows="2"
                            placeholder="请输入内容"/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="备注"  prop="remake">
                <a-textarea v-model="form.remake"
                            :maxLength="100"
                            :rows="2"
                            placeholder="请输入内容"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="detail-container">
        <div class="detail-title">原材料</div>
        <div class="table-operation">
          <a-select
            mode="multiple"
            style="width: 380px"
            placeholder="请选择原材料"
            option-label-prop="label"
            :default-value="[]"
          >
            <a-select-option value="IC" label="IC">
              IC (XA03J)
            </a-select-option>
          </a-select>
          <a-button type="primary" @click="addMaterial" icon="plus" v-if="QX.add">新增</a-button>
        </div>
        <a-table
          :columns="columnsMaterial"
          :data-source="materialList"
          :pagination="false"
          :loading="loading"
          :scroll="{x: 2300,y: this.$getViewportSize().height-500 }"
          rowKey="id">
          <template
            v-for="col in itemList"
            :slot="col"
            slot-scope="text, record, index"
          >
            <div :key="col">
              <span v-if="record.editable">
                <a-textarea
                  v-if="col=='componentRemake'"
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.id, col)"
                />
                <a-select
                  v-else-if="col=='supplyType'"
                  :value="text"
                  placeholder="请选择"
                  style="width: 130px"
                  @change="e => handleChange(e, record.id, col)"
                >
                  <a-select-option  key="" value="" >
                    请选择
                  </a-select-option>
                  <a-select-option  key="001" value="001" >
                    001
                  </a-select-option>
                </a-select>
                <a-select
                  v-else-if="col=='costRelated'"
                  :value="text"
                  placeholder="请选择"
                  style="width: 130px"
                  @change="e => handleChange(e, record.id, col)"
                >
                  <a-select-option  key="" value="" >
                    请选择
                  </a-select-option>
                  <a-select-option  key="001" value="001" >
                    001
                  </a-select-option>
                </a-select>
                <a-input
                  v-else
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.id, col)"
                />
              </span>
              <span v-else>
                {{ text }}
              </span>
            </div>
          </template>
          <span slot="action" slot-scope="text,record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a @click="() => save(record.id)">保存</a>
                <a-divider type="vertical"/>
                <a-popconfirm title="确定取消编辑吗?" @confirm="() => cancel(record.id)">
                  <a>取消</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a :disabled="editingKey !== ''" @click="() => edit(record.id)">编辑</a>
                <a-divider type="vertical"/>
                <a :disabled="editingKey !== ''" @click="() => del(record.id)">删除</a>
              </span>
            </div>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import preventBack from 'vue-prevent-browser-back';
export default {
  name: "Dict",
  mixins: [preventBack],//注入
  props: ['masterbatchCode'],
  data() {
    return {
      idStart: 0,
      masterbatchCode: '',
      QX:{
        read:true,
        add: true,
        edit: true,
        delete: true
      },
      itemTitle: '',
      disabled: false,
      materialList:[],
      columnsMaterial,
      loading: false,
      submitLoading: false,
      labelCol: {span: 7},
      wrapperCol: {span: 17},
      form: {
        masterbatchCode: '',
        masterbatchName: '',
        masterbatchCompany: '',
        version: '',
        remake: '',
        versionMemo: '',
        masterbatchModel: '',
      },
      rules: {
        masterbatchCode: [
          {required: true, message: '请输入母料编码', trigger: 'blur'},
        ],
        masterbatchName: [
          {required: true, message: '请输入母料名称', trigger: 'blur'},
        ],
        masterbatchCompany: [
          {required: true, message: '请选择计量单位', trigger: 'change'},
        ],
        version: [
          {required: true, message: '请输入版本号', trigger: 'blur'},
        ],
      },
      editingKey: '',
      itemList: ['componentCode',
        'componentName',
        'componentModel',
        'componentCompany',
        'basicDosage',
        'basicQuantity',
        'componentLoss',
        'auxiliaryCompanyCo',
        'auxiliaryCompany',
        'conversion',
        'auxiliaryBasicDosage',
        'supplyType',
        'costRelated',
        'warehouseCode',
        'warehouseName',
        'dep',
        'componentRemake']
    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    submitForm() {
    },
    addMaterial() {
      let option = {
        id: this.idStart+1,
        componentCode: '1',
        componentName: '1',
        componentModel: '1',
        componentCompany: '1',
        basicDosage: '1',
        basicQuantity: '1',
        componentLoss: '',
        auxiliaryCompanyCo: '',
        auxiliaryCompany: '',
        conversion: '',
        auxiliaryBasicDosage: '',
        supplyType: '1',
        costRelated: '1',
        warehouseCode: '',
        warehouseName: '',
        dep: '',
        componentRemake: ''
      };
      this.idStart = option.id
      this.materialList = [...this.materialList,option]
      this.cacheData = this.materialList.map(item => ({ ...item }));
    },
    handleChange(value, key, column) {
      const newData = [...this.materialList];
      const target = newData.find(item => key === item.id);
      if (target) {
        target[column] = value;
        this.materialList = newData;
      }
    },
    edit(key) {
      const newData = [...this.materialList];
      const target = newData.find(item => key === item.id);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.materialList = newData;
      }
    },
    del(key) {
      this.materialList = this.materialList.filter((item)=>{
        return key != item.id;
      })
    },
    save(key) {
      const newData = [...this.materialList];
      const newCacheData = [...this.cacheData];
      const target = newData.find(item => key === item.id);
      const targetCache = newCacheData.find(item => key === item.id)
      if (target && targetCache) {
        if(!target.componentCode) {
          this.$message.warning('请输入子件编码')
          return
        }
        if(!target.componentName) {
          this.$message.warning('请输入子件名称')
          return
        }
        if(!target.componentModel) {
          this.$message.warning('请输入子件规格')
          return
        }
        if(!target.componentCompany) {
          this.$message.warning('请输入计量单位')
          return
        }
        if(!target.basicDosage) {
          this.$message.warning('请输入基本用量')
          return
        }
        if(!target.basicQuantity) {
          this.$message.warning('请输入基础数量')
          return
        }
        delete target.editable;
        this.materialList = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = [...this.materialList];
      const target = newData.find(item => key === item.id);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.id));
        delete target.editable;
        this.materialList = newData;
      }
    },
  }
}

const columnsMaterial = [
  {
    title: '序号',
    align: 'center',
    width: '70px',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '子件编码',
    align: 'center',
    dataIndex: 'componentCode',
    key: 'componentCode',
    scopedSlots: {customRender: 'componentCode'},
  },
  {
    title: '子件名称',
    align: 'center',
    dataIndex: 'componentName',
    key: 'componentName',
    scopedSlots: {customRender: 'componentName'},
    width: 250,
    ellipsis: true,
  },
  {
    title: '子件规格',
    align: 'center',
    dataIndex: 'componentModel',
    key: 'componentModel',
    scopedSlots: {customRender: 'componentModel'},
  },
  {
    title: '计量单位',
    align: 'center',
    dataIndex: 'componentCompany',
    key: 'componentCompany',
    width: 150,
    scopedSlots: {customRender: 'componentCompany'},
  },
  {
    title: '基本用量',
    align: 'center',
    dataIndex: 'basicDosage',
    key: 'basicDosage',
    width: 100,
    scopedSlots: {customRender: 'basicDosage'},
  },
  {
    title: '基础数量',
    align: 'center',
    dataIndex: 'basicQuantity',
    key: 'basicQuantity',
    width: 120,
    scopedSlots: {customRender: 'basicQuantity'},
  },
  {
    title: '子件损耗率',
    align: 'center',
    dataIndex: 'componentLoss',
    key: 'componentLoss',
    scopedSlots: {customRender: 'componentLoss'},
  },
  {
    title: '辅助单位编码',
    align: 'center',
    dataIndex: 'auxiliaryCompanyCo',
    key: 'auxiliaryCompanyCo',
    scopedSlots: {customRender: 'auxiliaryCompanyCo'},
  },
  {
    title: '辅助单位',
    align: 'center',
    dataIndex: 'auxiliaryCompany',
    key: 'auxiliaryCompany',
    scopedSlots: {customRender: 'auxiliaryCompany'},
  },
  {
    title: '换算率',
    align: 'center',
    dataIndex: 'conversion',
    key: 'conversion',
    scopedSlots: {customRender: 'conversion'},
  },
  {
    title: '辅助基本用量',
    align: 'center',
    dataIndex: 'auxiliaryBasicDosage',
    key: 'auxiliaryBasicDosage',
    scopedSlots: {customRender: 'auxiliaryBasicDosage'},
  },
  {
    title: '供应类型',
    align: 'center',
    dataIndex: 'supplyType',
    key: 'supplyType',
    width: 150,
    scopedSlots: {customRender: 'supplyType'},
  },
  {
    title: '成本相关',
    align: 'center',
    dataIndex: 'costRelated',
    key: 'costRelated',
    width: 150,
    scopedSlots: {customRender: 'costRelated'},
  },
  {
    title: '仓库编码',
    align: 'center',
    dataIndex: 'warehouseCode',
    key: 'warehouseCode',
    scopedSlots: {customRender: 'warehouseCode'},
  },
  {
    title: '仓库名称',
    align: 'center',
    dataIndex: 'warehouseName',
    key: 'warehouseName',
    scopedSlots: {customRender: 'warehouseName'},
  },
  {
    title: '领料部门',
    align: 'center',
    dataIndex: 'dep',
    key: 'dep',
    scopedSlots: {customRender: 'dep'},
  },
  {
    title: '备注',
    align: 'left',
    dataIndex: 'componentRemake',
    key: 'componentRemake',
    ellipsis: true,
    width: 200,
    scopedSlots: {customRender: 'componentRemake'},
  },
  {
    align: 'center',
    title: '操作',
    width: 150,
    dataIndex: 'action',
    key: 'action',
    fixed: 'right',
    scopedSlots: {customRender: 'action'},
  },
];

</script>

<style scoped>
@import "../../../assets/css/maincss.css";
/deep/ .ant-table-tbody >tr.ant-table-expanded-row-level-1>td {
  padding: 0 0 2px 0;
}
.planDetial {
  background: none;
  padding: 0 0;
}
</style>
